import React,{useState,useEffect} from 'react'
import './index.css'
import * as echarts from 'echarts';
//人员流动
import {getPro} from '../../request/index'
//引入图片
import toDay from '../../image/today.png'
import yesDay from '../../image/yestoday.png'
function RightBottom() {
  let [pro,setPro]=useState({});
  //接数据  
  useEffect(()=>{
    getPro().then(res=>{
      console.log('人员流动',res);
      setPro(res.data.data.result[0])
      //echrts
      var chartDom = document.querySelector('.tu')
      var myChart = echarts.init(chartDom);
      let option = {
        xAxis: {
          type: 'category',
          data: []
        },
        yAxis: {
          type: 'value',
          
        },
        grid:{
          bottom:30,
          left:40
        },
        
        series: [
          {
            data: [120, 200, 150, 80, 70, 110, 130],
            type: 'bar',
            stack: 'a',
            name: 'a',
            //圆角
            itemStyle:{
              borderRadius:15,
            },
            //柱子粗细
            barWidth:'15%'
          },
          
          {
            data: [30, '50', 0, 20, 10, '-', 0],
            type: 'bar',
            stack: 'b',
            name: 'd',
            itemStyle:{
              borderRadius:15
            },
            barWidth:'15%'
          },
          {
            data: [10, 20, 150, 0, '-', 50, 10],
            type: 'bar',
            stack: 'b',
            name: 'e',
            itemStyle:{
              borderRadius:15
            },
            barWidth:'15%'
          }
        ]
      };
      let newDate=res.data.data.result[0].source
      option.xAxis.data=newDate.map((item)=>item.product)//X轴内容
      myChart.setOption(option);
      

    })
  },[])
  return (
    <div >
      <div className='propTitle'>
        <div>校园人员流动情况……</div>
      </div>
      <div className='xia'>
        <div className='fk'>
          <div>
            <img src={toDay}></img>
            <div>
              <span>1</span>
              <span>昨日访客</span>
            </div>
          </div>
          <div>
            <img src={yesDay}></img>
            <div>
              <span>2</span>
              <span>今日访客</span>
            </div>
          </div>
        </div>
        <div className='tu'>
        
        </div> 
      </div>
      
    </div>
  )
}

export default RightBottom
